{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/file-upload/jquery-bootstrap/jquery.fileupload.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/vendor/jquery.ui.widget.js') }}" type="text/javascript"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.iframe-transport.js') }}" type="text/javascript"></script>
    <!-- The basic File Upload plugin -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload.js') }}" type="text/javascript"></script>

    <script type="text/javascript">
    
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        var url = "{{ asset('bundles/applicationbootstrap/uploads/jquery-bootstrap/images/index.php') }}";
        
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<a/>')
                      .attr('target', '_blank')
                      .prop('href', file.url)
                      .text(file.name)
                      .append('<br/>')
                      .appendTo('#files');
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
    
    </script>

{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>jQuery File Upload</h1>
        </div>
        <h2 class="lead">Basic version</h2>
        
        {% include 'ApplicationBootstrapBundle:FileUpload:_navTabsjQueryUiBootstrop.html.twig' %}
	    <br/>
	    <blockquote>
	        <p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
	        Supports cross-domain, chunked and resumable file uploads.<br>
	        Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
	    </blockquote>
        
        <div class="row">
            <div class="col-md-12">
            
			    <!-- The fileinput-button span is used to style the file input field as button -->
			    <span class="btn btn-success fileinput-button">
			        <i class="glyphicon glyphicon-plus"></i>
			        <span>Select files...</span>
			        <!-- The file input field used as target for the file upload widget -->
			        <input id="fileupload" type="file" name="files[]" multiple>
			    </span>
			    <br/>
			    <br/>
			    <!-- The global progress bar -->
			    <div id="progress" class="progress">
			        <div class="progress-bar progress-bar-success"></div>
			    </div>
			    <!-- The container for the uploaded files -->
			    <div id="files" class="files"></div>
			    
			    <hr/>
			    <div class="panel panel-default">
			        <div class="panel-heading">
			            <h3 class="panel-title">Demo Notes</h3>
			        </div>
			        <div class="panel-body">
			            <ul>
			                <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
			                <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
			                <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
			                <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
			                <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
			                <li>Built with <a href="http://getbootstrap.com/">Bootstrap</a> and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
			            </ul>
			        </div>
			    </div>
			    
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}